@mainColor: white;
@borderWidth: 1px;
@border: @borderWidth solid @mainColor;
@headR: 100px;
@mainGutter: 18px;
@mainLineHeight: 30px;
@viceGutter: 8px;
@veryBigFontSize: 56px;
@mainFontSize: 26px;
@viceFontSize: 22px;
@giftImgSize: 30px;

.show{
  font-size: @mainFontSize;
  width: 100%;
  height: 100%;

  color: white;

  display: flex;
  flex-direction: column;
  background: url('../../static/images/giphy.gif')
  no-repeat 50% 50% ;
  background-size: cover;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.moments{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0 @mainGutter;
}

.moment{
  flex-grow: 1;
  border: 1px solid #aaa;
  border-radius: 8px;
  margin: 20px 0;

  background-color:  rgba(0,0,0,0.7);
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.headWrap{
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  padding-top: @viceGutter;

}

.headOut{
   flex-grow: 0;
  flex-shrink: 0;

  padding-left: @mainGutter;
  margin-right: @mainGutter;
}

.headIn{
  width: @headR;
  height:@headR;

  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.headIn img{
  height: 100%;
  width: 100%;
}



.content{
  display: flex;
  flex-grow: 1;
  flex-direction: column;

  padding: @viceGutter @viceGutter @viceGutter 0;
}

.cHead{
  display: flex;
  flex-direction: row;
  justify-content:  space-between;

  flex-basis: @mainLineHeight 0 0;
  line-height: @mainLineHeight;

}

.name{
  font-size: @viceFontSize;
}

.time{
  font-size: @viceFontSize;
}




// 礼物
.gifts{
  line-height: 1.5;
}

.giftImg{
  width: @giftImgSize;
  height: @giftImgSize;
  margin-right: 4px;
}


//留言
.sayContent{
  margin-top:  8px;
  flex-grow: 1;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}

//当前赏金
.money{
  flex-basis: 130px;
  flex-grow: 0;
  text-align: center;

  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: @veryBigFontSize;
  background: linear-gradient( to bottom, rgba( 1,1,1,1 ), rgba( 1,1,1,0 )  );
  cursor: pointer
}

// 抽出两名幸运蛾
.luckyDog{
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.luckyDogCom{

  padding: @mainGutter;
  border: 1px solid #aaa;
  border-radius: 8px;
  margin: 20px;
  background-color:  rgba(0,0,0,0.7);

  flex-shrink: 0;
  flex-grow: 0;
}

.makeSomeLuck {
  .luckyDogCom;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  flex-direction: column;
  flex-grow: 1;

}


.beginButton{
  cursor: pointer;
  padding: 4px;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  transition: all 0.3s ease;
  margin-top: 24px;
}

.beginButton:hover{
  border-bottom: 2px solid white;
  border-top: 2px solid white;
}

.luckyNum{
  transition: all 200ms ease;
  font-size: 48px;
  display: flex;
  flex-direction: row;
  letter-spacing: 4px;
  box-shadow: 0 0 0 white;
  padding: 0 32px;
  border-radius: 16px;
}

.numBig{
  font-size: 80px;
  box-shadow: 0 0 100px white;
  background: rgba(0,0,0, 0.4);
  margin-bottom: 32px;
}

.heart{
  width: 0;
  position: fixed;
  top: 5%;
  z-index: 10000;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 32px;
}
.heart img{
  width: 100%;
}

.giftText{
  padding: 8px;
  border-radius: 8px;
  background-color:  rgba(0,0,0,0.7);;
}

:global(.show-fade-enter) {
  opacity: 0;
  box-shadow: 0 0 0 white;
}

:global(.show-fade-enter.show-fade-enter-active ){
  opacity: 1;
  box-shadow: 0 0 80px white;
  transition: all 1000ms ease-out;
}

:global(.show-heart-enter) {
  width: 0;
}

:global(.show-heart-enter.show-heart-enter-active ){
  width: 50%;
  transition: width 1000ms ease-out;
}

:global(.show-heart-exit) {
  width: 0;
}

:global(.show-heart-exit.show-heart-exit-active ){
  width: 0;
  transition: width 0ms ease-out;
}



